<template>
    <div class="flex">
        <div class="table" style="width: 100%">
            <Search :formState="formState" @searchData="onSearchList" />
            <a-card>
                <TableTools @onRefresh="onRefresh" />
                <a-table
                    :pagination="{
                        pageSize: formState.pageSize,
                        total: total,
                        showTotal: (total) => `共${total}条记录`,
                        size: 'middle',
                    }"
                    :rowKey="(record) => record.id"
                    :columns="columns"
                    :data-source="repositories"
                    size="middle"
                    :loading="tableLoading"
                    @change="handleTableChange"
                >
                    <template #sjdxms="{ text: row }">
                        <SnippetsOutlined />
                        {{ row.sjdxms }}
                    </template>
                    <template #ywlxmc="{ record }">
                        {{
                            record.ywlxmc
                                ? record.ywlxmc
                                : onHandleCode(record.ywlxid)
                        }}
                    </template>
                    <template #issync="{ record }">
                        <a-tag :color="tagColor(record.issync)">{{
                            record.issync === "0"
                                ? "未同步"
                                : record.issync === "1"
                                ? "已同步"
                                : record.issync === "2"
                                ? "同步中"
                                : "同步失败"
                        }}</a-tag>
                    </template>
                    <template #operation="{ text: row }">
                        <a-popconfirm
                            title="你确定启动抽取任务吗?"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="onDataSync(row.id, row.issync)"
                        >
                            <a-tag size="small">数据同步</a-tag>
                        </a-popconfirm>
                        <a-tag @click="onPreview(row.sjdxmc)">预览</a-tag>
                    </template>
                </a-table>
            </a-card>
            <Modal
                :visible="visible"
                :loading="loading"
                :title="title"
                :row="row"
                :type="type"
                :userList="userList"
                :tableNameList="tableNameList"
                :dataSource="dataSource"
                :createColumns="createColumns"
                @handleOk="onHandleConfirm"
                @handleCancel="onHandleCancel"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { TableStateFilters } from "ant-design-vue/es/table/interface";
import * as API from "@/api/data-object";
import { SnippetsOutlined, SyncOutlined } from "@ant-design/icons-vue";
import {
    defineComponent,
    reactive,
    toRefs,
    onMounted,
    UnwrapRef,
    computed,
} from "vue";
import useRepositoryNameSearch from "./useRepositoryNameSearch";
import Modal from "@/components/modal/ModalO.vue";
import Search from "./components/search.vue";
import TableTools from "./components/tableTools.vue";
import { message } from "ant-design-vue";
import { onHandleCode, tagColor } from "@/filter/index";
interface FormState {
    sjyid: string;
    ywlxid: string;
    sjdxmc: string;
    sjdxms: string;
    sjylx: string;
    sjyfl: string;
    pageSize: number;
    pageNum: number;
    orderByColumn: string;
    isAsc: string;
}
interface Store {
    tableLoading: boolean;
    loading: boolean;
    visible: boolean;
    title: String;
    row: UnwrapRef<Record<string, any>>;
    type: number;
    userList: [];
    tableNameList: [];
    dataSource: any[];
    createColumns: any[];
    onSearchList: (formState: FormState) => void;
    handleTableChange: (
        pagination: any,
        filter: TableStateFilters,
        sorter: any
    ) => void;
    onHandleConfirm: (form: any) => void;
    onHandleCancel: () => void;
    onPreview: (sjdxmc: string) => void;
    onDataSync: (id: string, status: string) => void;
    onHandleMatch: (id: string) => void;
    onRefresh: () => void;
}
export default defineComponent({
    name: "DataExtract",
    setup() {
        const formState = reactive<FormState>({
            sjyid: "",
            ywlxid: "",
            sjdxmc: "",
            sjdxms: "",
            sjylx: "",
            sjyfl: "",
            pageSize: 10,
            pageNum: 1,
            orderByColumn: "",
            isAsc: "asc",
        });
        const columns = [
            {
                title: "数据表中文名",
                slots: { customRender: "sjdxms" },
                key: "sjdxms",
            },
            { title: "数据表名称", dataIndex: "sjdxmc", key: "sjdxmc" },
            {
                title: "业务类型",
                slots: { customRender: "ywlxmc" },
                key: "ywlxmc",
            },
            {
                title: "同步数据状态",
                key: "issync",
                slots: { customRender: "issync" },
            },
            { title: "创建时间", dataIndex: "time", key: "time", sorter: true },
            {
                title: "操作",
                key: "operation",
                slots: { customRender: "operation" },
                width: 240,
            },
        ];
        const {
            total,
            repositories,
            getUserRepositories,
        } = useRepositoryNameSearch(formState);
        onMounted(getUserRepositories);
        const store = reactive<Store>({
            tableLoading: false,
            loading: false,
            visible: false,
            title: "",
            type: 1,
            row: {},
            userList: [],
            tableNameList: [],
            dataSource: [],
            createColumns: [],
            onSearchList: (formState) => {
                store.tableLoading = true;
                formState = formState;
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            handleTableChange: (pagination, filter, sorter) => {
                store.tableLoading = true;
                formState.pageNum = pagination.current;
                if (sorter && sorter.order) {
                    formState.isAsc =
                        sorter.order === "ascend" ? "asc" : "desc";
                    formState.orderByColumn = sorter.field;
                }
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            onHandleConfirm: (form) => {
                store.loading = true;
                switch (store.type) {
                    case 1:
                        API.edit(form).then(({ msg }: any) => {
                            getUserRepositories();
                            store.loading = false;
                            store.visible = false;
                            message.success(msg);
                        });
                        break;
                    case 2:
                        API.addData(form).then(({ msg }: any) => {
                            getUserRepositories();
                            store.loading = false;
                            store.visible = false;
                            message.success(msg);
                        });
                        break;
                    default:
                        break;
                }
            },
            onHandleCancel: () => {
                store.loading = false;
                store.visible = false;
            },
            onPreview: (sjdxmc) => {
                const hide = message.loading("正在请求数据...");
                API.dataPreview_v(sjdxmc).then(({ data }: any) => {
                    hide();
                    store.createColumns = [];
                    store.dataSource = [];
                    for (let i = 0; i < data.keySet.length; i++) {
                        const e = data.keySet[i];
                        let createObject = Object.assign({
                            title: e,
                            dataIndex: e,
                            key: e,
                        });
                        store.createColumns.push(createObject);
                    }
                    for (let t = 0; t < data.dataList.length; t++) {
                        const x = data.dataList[t];
                        let createID: never[] = Object.assign(x, {
                            customId: t,
                        });
                        store.dataSource.push(createID);
                    }
                    store.loading = false;
                    store.visible = true;
                    store.title = "数据预览";
                    store.type = 3;
                });
            },
            onHandleMatch: (id) => {
                API.addressMatchApi(id).then(({ msg }: any) => {
                    getUserRepositories();
                    message.success(msg);
                });
            },
            onDataSync: (id, issync) => {
                if (issync === "0" || issync === "3") {
                    store.tableLoading = true;
                    API.getTableApi(id).then(({ msg }: any) => {
                        getUserRepositories().then(() => {
                            store.tableLoading = false;
                            message.success(msg);
                        });
                    });
                } else {
                    message.success("数据已同步或数据同步中");
                }
            },
            onRefresh: () => {
                getUserRepositories().then(() => {
                    message.success("刷新成功");
                });
            },
        });
        return {
            total,
            formState,
            repositories,
            columns,
            tagColor,
            onHandleCode,
            ...toRefs(store),
        };
    },
    components: {
        SnippetsOutlined,
        SyncOutlined,
        Search,
        Modal,
        TableTools,
    },
});
</script>